<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/weuix.min.css"/>
    <script src="js/zepto.min.js"></script>
</head>
<body ontouchstart style="background-color: #f8f8f8;">
<div class="weui_cells_title">邮箱、手机号需通过验证</div>

<div class="weui_cells" id="user-info-div">
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">昵称</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input v-model="name" class="weui_input" placeholder="请输入昵称">
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">邮箱</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input v-model="email" class="weui_input" type="email" placeholder="请输入邮箱">
        </div>
        <div class="weui_cell_ft" v-if="e_verify_show">
            <span>未验证</span>
        </div>
    </div>
    <div class="weui_cell">
        <div class="weui_cell_hd"><label class="weui_label">手机号</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input v-model="mobile" class="weui_input" type="tel" pattern="[0-9]{11}" maxlength="11" placeholder="输入你现在的手机号">
        </div>
        <div class="weui_cell_ft" v-if="m_verify_show">
            <span>未验证</span>
        </div>
    </div>
    <div class="weui_cell weui_vcode" v-if="m_verify_show">
        <div class="weui_cell_hd"><label class="weui_label">验证码</label></div>
        <div class="weui_cell_bd weui_cell_primary">
            <input class="weui_input" type="number"
                   placeholder="请输入验证码">
        </div>
        <div class="weui_cell_ft">
            <i class="weui_icon_warn"></i>
            <a href="javascript:;" class="weui-vcode-btn">获取验证码</a>
        </div>
    </div>


</div>

<div class="weui_btn_area">
    <a id="formSubmitBtn" class="weui_btn weui_btn_primary">提交</a>
</div>

<script src="js/vue.min.js"></script>
<script src="js/slideleft.js"></script>
<script src="js/common-20180604.js"></script>
<script>
    // new VConsole();

    checkUserid();

    $(function(){
        var mobileOld, nameOld, emailOld;
        var vm = new Vue({
            el: '#user-info-div',
            data: {
                name: '',
                email: '',
                mobile: '',
                e_verify: 'Y',
                m_verify: 'Y'
            },
            computed: {
                e_verify_show: function () {
                    return this.email && this.e_verify != 'Y';
                },
                m_verify_show: function () {
                    // 更换手机号后 需重新校验
                    if (mobileOld && mobileOld != this.mobile) {
                        this.m_verify = "N";
                    }
                    return this.mobile && this.m_verify != 'Y';
                }
            },

        })

        $.ajax({
            url: "/user/" + localStorage.getItem("userid"),
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                var user = data.result;

                vm.name = user.name;
                vm.email = user.email;
                vm.mobile = user.mobile;

                vm.e_verify = user.emailVerify;
                vm.m_verify = user.mobileVerify;

                nameOld = user.name;
                emailOld = user.email;
                mobileOld = user.mobile;
            }
        });

        $("#formSubmitBtn").on("click", function() {
            if (vm.name == nameOld && vm.email == emailOld && vm.mobile == mobileOld) {
                $.alert("信息未变更");
                return;
            }

            $.showLoading("正在修改");

            $.ajax({
                url: "/user",
                type: "put",
                data: {
                    host: window.location.origin,
                    userid: localStorage.getItem("userid"),
                    name: vm.name,
                    email: vm.email,
                    mobile: vm.mobile
                },
                dataType: "json",
                success: function (data) {
                    if (data.errCode == 0){
                        $.toast("修改成功");
                    } else {
                        $.toptips(data.errMsg);
                    }
                },
                error: function () {
                    $.toptips("提交失败");
                },
                completed: function () {
                    $.hideLoading();
                }
            });
        })



    });

</script>

</body>
</html>
